<template>
  <div v-if="isMobile()" class="mobile-common-query card-item">
    <div class="query-item">
      <span>分类：</span>
      <el-segmented v-model="anniversaryStore.queryInfo.category"
                    :options="queryCategoryList"
                    @change="anniversaryStore.queryAnniversaryList()"/>
    </div>
  </div>

  <div v-else class="common-query">
    <el-select v-model="anniversaryStore.queryInfo.category"
               placeholder="请选择纪念日类别" clearable
               @change="anniversaryStore.queryAnniversaryList()"
               style="width: 180px">
      <el-option
          v-for="(item, index) in queryCategoryList"
          :key="index" :label="item.label" :value="item.value"
      />
    </el-select>

    <el-button :icon="Refresh" circle @click="refreshClick"/>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useAnniversaryStore } from '@/store/anniversary.ts'
import { Refresh } from '@element-plus/icons-vue'
import { isMobile } from 'vue3-common/utils/layoutUtil'
import { ICategory } from '@/types'

const anniversaryStore = useAnniversaryStore()

const queryCategoryList = ref([] as ICategory[])

onMounted(async () => {
  await anniversaryStore.queryAnniversaryCategory()
  initCategoryList()
})

const refreshClick = async () => {
  anniversaryStore.queryInfo.category = ''
  await anniversaryStore.queryAnniversaryList()
}

const initCategoryList = () => {
  queryCategoryList.value = []
  queryCategoryList.value.push({
    label: '全部',
    value: ''
  })
  anniversaryStore.categoryStats.forEach((item) => {
    queryCategoryList.value.push({
      label: item.name,
      value: item.name
    })
  })
}
</script>
